<template>
  <el-container class="bg_img" style="height: 1000px; ">
    <el-header style="height:100px;  ">
      <img src="./../../assets/images/bigData01/head.png" style="width: 100%;height: 100%;">
    </el-header>
    <el-main>
      <div style="height:60%">
        <el-row :gutter="10">
          <el-col :span="8">
            <div style=" border: 1px #00bbfb solid;width: 550px; height: 500px;">
              <img src="./../../assets/images/bigData01/top-left.png">
              <div style=" margin-left: 20px;" >
                <el-button v-for="(it, index) in paramData" :key="index"style="color:#fff; font: 1em sans-serif; " type="text" @click="goBack()">{{it.name}}/
                </el-button>
               
                <img src="./../../assets/images/bigData01/title_img.png" style="margin-left: 10px;">
              </div>

              <div id="map" style="height:85%;width: 90%;   margin:0 auto; ">
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="border: 1px #00bbfb solid; height: 500px;">
              <img src="./../../assets/images/bigData01/top-left.png">
              <div style="color:#fff; font: 1em sans-serif; margin-left: 20px; ">学生体温异常率
                <img src="./../../assets/images/bigData01/title_img.png" style="margin-left: 10px;">
              </div>
              <div id="tempChart" style="height:90%;width:90%;   margin: 10px auto;">
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="height:60%">
        <el-row :gutter="10">
          <el-col :span="8">
            <div style="border: 1px #00bbfb solid; height: 500px;">
              <img src="./../../assets/images/bigData01/top-left.png">
              <div style="color:#fff; font: 1em sans-serif; margin-left: 20px; ">学校体温异常率
                <img src="./../../assets/images/bigData01/title_img.png" style="margin-left: 10px;">
              </div>
              <div id="scoChart" style="height:90%;width:90%;   margin: 10px auto;">
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="border: 1px #00bbfb solid; height: 500px;">
              <img src="./../../assets/images/bigData01/top-left.png">
              <div style="color:#fff; font: 1em sans-serif; margin-left: 20px; ">设备在线率
                <img src="./../../assets/images/bigData01/title_img.png" style="margin-left: 10px;">
              </div>
              <div id="equipmentChart" style="height:90%;width:90%;   margin: 10px auto;">
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  import * as echarts from "echarts";
  import {
    Map,
    regionName
  } from "@/api/map/region";

  export default {
    name: "BigDataIndex",
    data() {
      return {
        myChart: null,
        mapOption: {
          series: [{
            type: "map",
            map: 'map',
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .30)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(128, 217, 248, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                show: true,
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                  color: "#fff",
                }
              },
              emphasis: {
                show: true
              }
            },

          }, ],

        },

        mapJSON: [],
        regionNamelist: [],
        paramData: []
      }
    },
    created() {
      this.getRegionName();


    },
    mounted() {
      this.$nextTick(() => {
        this.getMap();
        this.getScoChart();
        this.getEquipmentChart();
      })
    },
    methods: {

      //获取地图
      async getMap() {
        let that = this;
        // 获取当前用户所在地域adcode及等级
        var adcode = this.$store.state.user.dept.deptIdStr.substring(0, 6);
        var level = this.$store.state.user.dept.deptLevel;
        var name = this.$store.state.user.dept.deptName;
        that.paramData.push({
          adcode,
          level,
          name
        });

        //获取地图
        that.myChart = echarts.init(document.getElementById("map"));
        await that.getMapBorder(level, adcode);
        that.myChart.on('click', async function(params) {
          var filter = that.getAdcodeLevel(params.name, that.mapJSON.features);
          var d = that.paramData[that.paramData.length - 1].level;
          console.log('当前等级', d);
          if (d != 'district') {
            //获取出下一级名 ,通过遍历所在地图数据获得adcode

            adcode = filter.adcode;
            level = filter.level;
            name = params.name
            that.paramData.push({
              adcode,
              level,
              name
            });
            await that.getMapBorder(level, adcode);

            //点击后获取新的Y轴数值
            regionName(adcode).then(response => {
              var arr = response.data.data.list;
              that.regionNamelist.length = 0;
              for (var item of arr) {
                that.regionNamelist.push(item.name);
              };
              that.getTempChart();
            });

          }

        });

      },

      /**
       * 根据地域编码及等级获取json
       */
      async getMapBorder(level, adcode) {
        let that = this;
        var mapJSON = null;
        await Map(level, adcode).then(response => {
          mapJSON = JSON.parse(response.data);
          that.mapJSON = mapJSON;
        });
        echarts.registerMap('map', mapJSON);
        that.myChart.setOption(that.mapOption);
      },


      /**
       * 根据名称及当前地图数据获取adcode
       */
      getAdcodeLevel(name, list) {
        var data = {
          adcode: null,
          level: null,
        };
        for (var item of list) {
          if (name === item.properties.name) {
            data.adcode = item.properties.adcode;
            data.level = item.properties.level;
            break;
          }
        }
        return data;
      },


      //获取Y轴城市名称
      async getRegionName() {
        var adcode = this.$store.state.user.dept.deptIdStr.substring(0, 6);
        await regionName(adcode).then(response => {
          var arr = response.data.data.list;
          if (!this.$yhFunc.isEmpty(arr)) {
            for (var item of arr) {
              let that = this;
              that.regionNamelist.push(item.name);
            }
          }
        });
        this.getTempChart();
      },


      //获取体温异常率图表
      getTempChart() {
        var myChart = echarts.init(document.getElementById('tempChart'));
        var tempOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['学生总数量', '体温异常学生数量'],
            textStyle: {
              color: '#ffffff'
            },

          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.001],
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: this.regionNamelist,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              },
            },
            axisLine: {
              lineStyle: {
                color: '#1db2f1',
              }
            },
          },
          series: [{
              name: '学生总数量',
              type: 'bar',
              data: [3598, 3326, 2903, 2865, 3254, 3321, 2987, 3548],
              itemStyle: {
                emphasis: {
                  barBorderRadius: 7
                },
                normal: {
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                        offset: 0,
                        color: '#49fcb0'
                      },
                      {
                        offset: 1,
                        color: '#39b4ed'
                      }
                    ]
                  )
                }
              }
            },
            {
              name: '体温异常学生数量',
              type: 'bar',
              data: [3499, 3301, 2854, 2754, 3201, 3309, 2765, 3451],
              itemStyle: {
                emphasis: {
                  barBorderRadius: 7
                },
                normal: {
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                        offset: 0,
                        color: '#fcf648'
                      },
                      {
                        offset: 1,
                        color: '#ee843a'
                      }
                    ]
                  )
                }
              }
            }
          ],
        };
        myChart.setOption(tempOption);
      },


      //返回上一级
      goBack() {
        this.paramData.pop();
        console.log('this.paramData', this.paramData)
        var data = this.paramData[this.paramData.length - 1];
        this.getMapBorder(data.level.toString(), data.adcode.toString());
        regionName(data.adcode.toString()).then(response => {
          var arr = response.data.data.list;
          this.regionNamelist.length = 0;
          for (var item of arr) {
            this.regionNamelist.push(item.name);
          };
          this.getTempChart();
        });
      },










      //获取学校温度异常率
      getScoChart() {
        var myChart = echarts.init(document.getElementById('scoChart'));
        var Option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['学生总数量', '体温异常学生数量'],
            textStyle: {
              color: '#ffffff'
            },

          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ["东营", "泰安", "枣庄", "淄博", "青岛", "潍坊", "烟台", "济南", ],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              },
            },
            axisLine: {
              lineStyle: {
                color: '#1db2f1',
              }
            },
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.001],
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              }
            },

          },
          series: [{
              name: '学校总数量',
              type: 'bar',
              data: [3598, 3326, 2903, 2865, 3254, 3321, 2987, 3548],
              itemStyle: {

                normal: {

                  color: '#ffab4f'

                }
              }
            },
            {
              name: '体温异常学校数量',
              type: 'bar',
              data: [3499, 3301, 2854, 2754, 3201, 3309, 2765, 3451],
              itemStyle: {
                normal: {
                  color: '#e60012'

                }
              }
            }
          ],
        };
        myChart.setOption(Option);


      },
      //获取设备异常率
      getEquipmentChart() {
        var myChart = echarts.init(document.getElementById('equipmentChart'));
        var Option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['学生总数量', '体温异常学生数量'],
            textStyle: {
              color: '#ffffff'
            },

          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {

            type: 'category',
            data: ["东营", "泰安", "枣庄", "淄博", "青岛", "潍坊", "烟台", "济南", ],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              },
            },
            axisLine: {
              lineStyle: {
                color: '#1db2f1',
              }
            },
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.001],
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#1db2f1'
              }
            },

          },
          series: [{
              name: '设备总数量',
              type: 'bar',
              data: [3598, 3326, 2903, 2865, 3254, 3321, 2987, 3548],
              itemStyle: {

                normal: {

                  color: '#00aaff'

                }
              }
            },
            {
              name: '在线设备数量',
              type: 'bar',
              data: [3499, 3301, 2854, 2754, 3201, 3309, 2765, 3451],
              itemStyle: {
                normal: {
                  color: '#ec6941'

                }
              }
            }
          ],
        };
        myChart.setOption(Option);
      }
    },
  }
</script>

<style scoped lang="scss">
  .bg_img {
    background: url("./../../assets/images/bigData01/bg1.png");
    width: 100%;
    height: 100%;
  }
</style>
